<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>会员注册管理系统</title>
    <style>
        .main{width: 80%;margin:0 auto;text-align: center}
        .main ul{width: 90%;margin:0 auto;text-align: center}
        .rad{color:red;}
    </style>
</head>
<body>
    <div class="main">
        <?php
        include 'nav.php';
        ?>
    </div>
    <form action="postReg.php" method="post">
            <table align="center" border="1" style="border-collapse: collapse">
                <tr>
                    <td align="right">用户名</td>
                    <td>
                        <label>
                            <input style="padding: 5px" name="username" placeholder="请输入用户名">
                        </label>
                    </td>
                </tr>
                <tr>
                    <td align="right">密码</td>
                    <td align="left">
                        <label>
                            <input style="padding: 5px" type="password" name="pw" placeholder="只能由数字和字母构成">
                        </label>
                    </td>
                </tr>
                <tr>
                    <td align="right">重复密码</td>
                    <td>
                        <label>
                            <input type="password" name="cpw" style="padding: 5px">
                        </label>
                    </td>
                </tr>
                <tr>
                    <td align="right">信箱</td>
                    <td>
                        <label>
                            <input style="padding: 5px" name="email">
                        </label>
                    </td>
                </tr>
                <tr>
                    <td align="right">性别</td>
                    <td>
                        <label>
                            <input type="radio" name="sex" value="男" style="padding: 5px">男
                        </label>
                        <label>
                            <input type="radio" name="sex" value="女" style="padding: 5px">女
                        </label>
                    </td>
                </tr>
                <tr>
                    <td align="right">爱好</td>
                    <td>
                        <label>
                            <input type="checkbox" name="fav[]" value="听音乐">听音乐
                        </label>
                        <label>
                            <input type="checkbox" name="fav[]" value="玩游戏">玩游戏
                        </label>
                        <label>
                            <input type="checkbox" name="fav[]" value="踢足球">踢足球
                        </label>
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        <input type="submit" value="提交">
                    </td>
                    <td align="left">
                        <input type="submit" value="重置">
                    </td>
                </tr>
            </table>
    </form>
    <script>
        function check(){
            let username =document.getElementById('username')[0].value
                .trim();
            //“用户名验证，要求只能是大小写字母，数字，长度为3-10
            let usernameReg = /^[a-zA-Z0-9]{3,10}$/;
            if(!usernameReg.test(username)){
                alert("用户名只能是大小写字母，主子，长度为3-10");
                return false;
            }
            let pw =document.getElementById('pw')[0].value.trim();
            //密码要求只能是大小写字母，数字，_，——，*，长度为6-10
            let pwReg = /^[a-zA-Z0-9_\-*]{6，10}$/;
            if(!pwReg.test(pw)) {
                alert("密码要求只能是大小写字母，数字，_，——，*，长度为6-10");
                return false;
            }
                let cpw = document.getElementsByName('cwp')[0].value.trim();
                if(cwp !== pw) {
                    alert('密码和确认密码必须相同！')
                    return false;
                }
                let email = document.getElementById('email')[0].value.trim();
                if (email){
                let emailReg = /^[a-zA-Z0-9_\-]+@([a-zA-Z0-9_\-]+\.)+(com|net)$/;
                if(!emailReg.test(email)){
                    alert("信箱格式不对！");
                    return false;
                }
            }
    </script>
</body>
</html>
